d
<template>
  <div class="crowd">
    <div class="c-banner"></div>
    <div class="c-nav">
      <div class="nav-wrap">
        <p class="title">
          <span>玩转</span>
          <span>众筹</span>
        </p>
        <ul class="nav-list">
          <li class="icon1">
            <img
              src=""
            />
            <span>怦然心动的项目</span>
          </li>
          <li class="icon1">
            <img
              src=""
            />
            <span>支持产品生产</span>
          </li>
          <li class="icon2">
            <img
              src=""
            />
            <span>项目众筹成功</span>
          </li>
          <li class="icon3">
            <img
              src=""
            />
            <span>抢先体验新品</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="c-projects">
      <div class="c-project">
        <div class="title-wrap">
          <div class="line"></div>
          <div class="title">
            <img
              src=""
            />
            <p>正在众筹</p>
          </div>
        </div>
        <ul class="crowd-projects">
          <li class="crowd-item" v-for="item in crowdList" :key="item.id">
            <div class="item-img">
              <img :src="item.imgUrl" />
            </div>
            <div class="item-info">
              <p class="title">{{ item.title }}</p>
              <p class="desc">{{ item.desc }}</p>
              <div class="c-progress">
                <progress max="100" :value="item.rate"></progress
                ><span class="rate">{{ item.rate }}%</span>
              </div>
              <ul>
                <li>
                  <p class="data">￥{{ item.fundMoney }}</p>
                  <p class="data-desc">已筹金额</p>
                </li>
                <li>
                  <p class="data">{{ item.supporters }}人</p>
                  <p class="data-desc">支持人数</p>
                </li>
                <li>
                  <p class="data">{{ item.residueDays }}</p>
                  <p class="data-desc">剩余时间</p>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { reqGetCrowdListData } from '@/api/index'
export default {
  name: 'CrowdFunding',
  data() {
    return {
      crowdList: [],
    }
  },
  mounted: async function () {
    const result = await reqGetCrowdListData()
    this.crowdList = result.data
  },
}
</script>

<style lang="less" scoped>
.crowd {
  margin: 0 auto;
  .c-banner {
    height: 420px;
    margin: 0 auto;
    background-image: url('https://yanxuan.nosdn.127.net/15175584364793457.jpg?imageView&quality=85&thumbnail=1920y420');
    background-repeat: no-repeat;
    background-position: center;
  }
  .c-nav {
    height: 64px;
    padding: 8px 0;
    .nav-wrap {
      width: 1090px;
      height: 64px;
      margin: 0 auto;
      display: flex;
      .title {
        width: 48px;
        height: 64px;
        font-size: 24px;
        color: #b4a078;
        letter-spacing: 0;
        margin: 0 28px;
      }
      .nav-list {
        height: 60px;
        display: flex;
        li {
          height: 60px;
          border-left: 1px solid #eaeaea;
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            width: 38px;
            height: 38px;
          }
          span {
            margin-left: 16px;
            font-size: 20px;
          }
        }
        .icon1 {
          width: 263px;
        }
        .icon2 {
          width: 210px;
        }
        .icon3 {
          width: 183px;
          padding-left: 40px;
        }
      }
    }
  }
  .c-projects {
    padding: 20px 0;
    background-color: #f4f4f4;
    .c-project {
      width: 1090px;
      padding: 40px 0;
      margin: 0 auto;
      .title-wrap {
        position: relative;
        width: 461px;
        height: 28px;
        margin: 0 auto;
        padding-bottom: 10px;
        .line {
          position: absolute;
          top: 14px;
          width: 461px;
          border-bottom: 1px solid #ccc;
        }
        .title {
          position: absolute;
          width: 221px;
          height: 28px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #333;
          left: 50%;
          top: 0;
          transform: translate(-50%);
          background-color: #f4f4f4;
          img {
            width: 30px;
            height: 30px;
            margin-right: 15px;
          }
          p {
            font-size: 28px;
          }
        }
      }
      .crowd-projects {
        display: flex;
        flex-wrap: wrap;
        justify-content:space-between;
        width: 1090px;
        .crowd-item {
          position: relative;
          width: 535px;
          height: 220px;
          margin-top: 20px;
          background-color: #fff;
          .item-info {
            position: absolute;
            right: 0;
            top: 0;
            width: 300px;
            height: 100%;
            padding-left: 15px;
            .title {
              font-size: 20px;
              color: #333;
              margin-top: 16px;
              line-height: 28px;
            }
            .desc {
              font-size: 14px;
              color: #999;
              letter-spacing: 0;
              line-height: 22px;
              margin-top: 4px;
            }
            .c-progress {
              position: absolute;
              bottom: 87px;
              line-height: 22px;
              progress {
                width: 220px;
                height: 2px;
                color: #f4f4f4;
                background-color: #b4a078;
                border-radius: 2px;
                position: relative;
              }
              span {
                position: absolute;
                font-size: 16px;
                right: -45px;
                bottom: -5px;
                color: #999;
              }
            }
            ul {
              position: absolute;
              bottom: 0;
              width: 300px;
              height: 38px;
              margin-bottom: 28px;
              li {
                float: left;
                width: 95px;
                height: 38px;
                p {
                  text-align: center;
                  font-size: 14px;
                }
                .data {
                  color: #333;
                }
                .data-desc {
                  color: #999;
                  margin-top: 8px;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
